<script>
import { defineComponent } from "vue";
import pageData from "@/assets/js/pageData";

export default defineComponent({
  name: "numScreen",
  data() {
    return {
      routeMap : {
          "/220breakPage": [251,252],
					"main1IntervalGraph": ["1zb"],
					"PingHua110kV161": [161],
					"Guiping220kV253": [253],
      }
    };
  },
  props: {
    dir: {
      type: String,
      default: 'top',
      validator(value) {
        return ['top', 'bottom', 'none','left','right'].includes(value)
      }},
    name: {
      type: String
    },
    P: {
      default: 0
    },
    Q:{
      default: 0.00
    },
    Ia:{
      default: 0.00
    },
    path: {
      type: String
    },
    ft_num: {
      type: String
    },
    textWidth: {
      type: [String,Number],
      default: "100"
    },
    numTranX: {
      type: [String,Number],
      default:undefined
    },
    numTranY: {
      type:[String,Number],
      default: undefined
    },
    ftCode: {
      type: [String,Number]
    },
    hasScreen:{
      type: Boolean,
      default: true
    },
    hasUnit:{
      type: Boolean,
      default: true
    }
  },
  methods: {
    getTransform(dir) {
      if (this.numTranY!==undefined&&this.numTranX!==undefined){
        return `translate(${this.numTranX},${this.numTranY})`
      }
      switch (dir) {
        case 'top':
          return 'translate(-55,0)';
        case 'left':
          return 'translate(-155,0)';
        case 'bottom':
          return 'translate(-55,90)';
        default:
          return '';
      }
    },
    jump() {
      const path = Object.keys(this.routeMap).find(key =>
        this.routeMap[key].includes(this.ftCode)
      )
      if (!path) {
        console.warn('未找到匹配路径')
        return
      }
      const data=pageData.find(item=>item.ftCode==this.ftCode)
      this.$router.push({
        path,
        query: {
          ftIndex: data.ftIndex,
          jgName: data.jgName,
          ftName: data.ftName
        }
      })
    }
  },
});
</script>

<template>
  <svg>
    <g @click="jump" style="cursor: pointer" transform="translate(40,15)" v-if="hasScreen">
      <rect x='100' y="5" :width="textWidth" height="24" style="stroke:#fff;fill: transparent;stroke-width: 3"/>
      <text
        :x="100 + textWidth / 2"
        y="22"
        text-anchor="middle"
        style="fill: #fff; font-size: 14px;font-family: '宋体';font-weight: 100"
        stroke="#fff"
      >
        {{ name }}
      </text>
    </g>
    <g :transform="getTransform(dir)" v-if="dir !== 'none'">
      <g v-if="this.Ia!==null">
        <text x="190" y="17" style="fill: rgb(255,255,255);font-size: 14px;font-weight: normal">{{ Number(Ia).toFixed(2) }}</text>
        <text x="230" y="17" style="fill: rgb(255,255,0);font-size: 14px;font-weight: normal" v-if="hasUnit">IA(A)</text>
      </g>

      <g v-if="this.P!==null">
      <text x="190" y="37" style="fill: rgb(255,255,255);font-size: 14px;font-weight: normal">{{ Number(P).toFixed(2) }}</text>
      <text x="230" y="37" style="fill: rgb(128,0,128);font-size: 14px;font-weight: normal" v-if="hasUnit">P(MW)</text>
      </g>
        <g v-if="this.Q!==null">
      <text x="190" y="57" style="fill: rgb(255,255,255);font-size: 14px;font-weight: normal">{{ Number(Q).toFixed(2) }}</text>
      <text x="230" y="57" style="fill: rgb(128,0,128);font-size: 14px;font-weight: normal" v-if="hasUnit">Q(Mvar)</text>
        </g>
    </g>


  </svg>

</template>

<style scoped lang="less">

</style>
